<template>
<div class="timeLinebox">
	<div class="leftbtn" @click="scrolltoLeft" >
		<i class="iconfont icon-left"  :class="{'notallowed':!showLeft}" ></i>
	</div>
	<div class="daysbox" id="daysbox">
		<div class="scroll-body" :style="{'left':scrollLeft+'px'}">
		<ul :style="{'width':liWith*(dayarea.end-dayarea.begin)+'px'}">
			<li v-for="item in dayareaArray" :key="item.date" :style="{'width':liWith+'px'}" :class="dayClass(item)"  @click="selectDate(item,$event)">
				<div class="day" >{{item.showtime}}({{item.week}})</div>
				<div class="badge"></div>
				<div class="leftL">
				</div>
				<div class="RightL">
				</div>
			</li>
		</ul>
		</div>
	</div>
	<div class="rightbtn" @click="scrolltoRight">
		<i class="iconfont icon-right"></i>
	</div>
</div>
</template>
<script type="es6">
import eventBus from '@/libs/eventBus';
import {parseTime, isBJMTC} from '../../../libs';
export default {
  data () {
    return {
      daysboxWith: 200, // 可显示区域宽度
      liWith: 115, // 每个时间块的长度
      dayarea: {
        begin: 0, // 当前天之前 5 天
        end: 20 // 当前天之后 20 天
      },
      dayareaArray: [],
      scrollLeft: 0,
      scrollLenght: 5, // 每次切换长度
      alignType: 'left'
    };
  },
  props: {
    value: {
      type: String,
      default: () => {
        if (isBJMTC()) {
          let today = new Date();
          return parseTime(today, '{y}-{m}-{d}');
        }
        return '';
      }
    }
  },
  components: {},
  computed: {
    showLeft () {
      if (this.scrollLeft === 0) {
        return false;
      }
      return true;
    }
  },
  methods: {
    setDateDays () {
      if (isBJMTC()) {
        let i = this.dayarea.begin;
        while (i < this.dayarea.end) {
          let today = new Date();
          let day = today.getDate();
          today.setDate(day + i);
          today.setHours(0, 0, 0, 0);
          let map = {
            date: parseTime(today, '{y}-{m}-{d}'),
            showtime: parseTime(today, '{m}-{d}'),
            week: parseTime(today, '{a}'),
            timestamp: today.getTime()
          };
          if (i === 0) {
            map.week = '今';
          }
          this.dayareaArray.push(map);
          i++;
        }
        this.selectDate(this.dayareaArray[0]);
      }
    },
    addDay (len) {
      if (isBJMTC()) {
        for (let i = 0; i < len; i++) {
          let today = new Date();
          let day = today.getDate();
          today.setDate(day + this.dayarea.end + i);
          today.setHours(0, 0, 0, 0);
          let map = {
            date: parseTime(today, '{y}-{m}-{d}'),
            showtime: parseTime(today, '{m}-{d}'),
            week: parseTime(today, '{a}'),
            timestamp: today.getTime()
          };
          this.dayareaArray.push(map);
        }
        this.dayarea.end += len;
      }
    },
    scrolltoRight () {
      // 时间线 右点击
      if ((this.scrollLeft * -1) + this.daysboxWith >= this.liWith * (this.dayarea.end - this.dayarea.begin)) {
        return;
      }
      let length = this.scrollLenght * this.liWith;
      // 判断是否有右侧遮挡
      let OcclusionLen = this.Occlusion('right');
      let goleft = (length + OcclusionLen) * -1 + this.scrollLeft;
      if (goleft * -1 + this.daysboxWith >= this.liWith * (this.dayarea.end - this.dayarea.begin)) {
        // 如果滚动距离超过上限
        // goleft = (this.liWith * (this.dayarea.end - this.dayarea.begin) - this.daysboxWith) * -1;
        this.addDay(5);
        this.$nextTick(() => {
          this.scrollLeft = goleft;
          this.alignType = 'right';
        });
        return;
      }
      this.scrollLeft = goleft;
      this.alignType = 'right';
    },
    scrolltoLeft () {
      // 时间线 左点击
      if (this.scrollLeft === 0) {
        return;
      }
      let length = this.scrollLenght * this.liWith;
      // 判断是否有右侧遮挡
      let OcclusionLen = this.Occlusion('left');
      let goleft = (length + OcclusionLen) + this.scrollLeft;
      if (goleft >= 0) {
        goleft = 0;
      }
      this.scrollLeft = goleft;
      this.alignType = 'left';
    },
    Occlusion (type) {
      let OcclusionLen = Math.ceil(this.liWith - this.daysboxWith % this.liWith);
      if (type === 'right' && this.alignType === 'left') {
        return OcclusionLen;
      } else if (type === 'left' && this.alignType === 'right') {
        return OcclusionLen;
      }
      return 0;
    },
    correctResize () {
      let changeLen = document.getElementById('daysbox').offsetWidth - this.daysboxWith;
      this.daysboxWith = document.getElementById('daysbox').offsetWidth;
      if (this.alignType === 'right') {
        this.scrollLeft = changeLen + this.scrollLeft;
      }
      // 当窗口大小发生变化 ， 修正对齐和遮盖
      if ((this.scrollLeft * -1) + this.daysboxWith >= this.liWith * (this.dayarea.end - this.dayarea.begin)) {
        this.scrollLeft = (this.liWith * (this.dayarea.end - this.dayarea.begin) - this.daysboxWith) * -1;
        this.alignType = 'right';
      }
      if (this.scrollLeft > 0) {
        this.scrollLeft = 0;
        this.alignType = 'left';
      }
    },
    dayClass (item) {
      let map = [];
      if (item.week === '今') {
        map.push('istoday');
      }
      let todymd = this.value.substring(5, 10);
      if (item.showtime === todymd) {
        map.push('isSelected');
      }
      return map;
    },
    selectDate (item, event) {
      // let el = event.currentTarget;
      this.$emit('input', item.date);
      this.$emit('changeTimetamp', item.timestamp);
    }
  },
  mounted () {
    this.daysboxWith = document.getElementById('daysbox').offsetWidth;
    eventBus.$on('onresize', () => {
      this.correctResize();
    });
    this.setDateDays();
  },
  destroyed () {
    eventBus.$off('onresize');
  }
};
</script>
<style lang="less" scoped>
	.timeLinebox{
		width: 100%;
		.leftbtn,.rightbtn{
			width: 60px;
			line-height: 35px;
			text-align: center;
			i{
				font-size: 20px;
				cursor: pointer;
				color: #333;
			}
		}
		.leftbtn:hover,.rightbtn:hover{
			.iconfont{
				color: #818181;
			}
			.iconfont.notallowed{
				color: #acacac;
			}
		}
		.leftbtn{
			float: left;
			box-shadow: 1px 0px 0px #e4e4e4;
			.notallowed{
				cursor: not-allowed;
				color: #acacac;
			}
		}
		.rightbtn{
			float: right;
			margin-top: -35px;
			box-shadow: -1px 0px 0px #e4e4e4;
		}
		.daysbox{
			margin: 0 62px;
			height: 35px;
			overflow: hidden;
			position: relative;
			.scroll-body{
				position: absolute;
				overflow: visible;
				white-space: nowrap;
				transition: left .3s ease;
				left: 0;
				top: 2px;
			}
			ul{
				height: 100%;
			}
			li {
				height: 100%;
				display: inline-block;
				position: relative;
				text-align: center;
				cursor: pointer;
				color: #333;
				.day{
					padding: 5px 20px;
					width: 54%;
					margin: 0 auto;
					top: 17px;
				}
				.day:hover{
					color: #5ba9f3;
				}
				.badge{
					display: none;
					width: 6px;
					height: 6px;
					background: #5ba9f3;
					position: absolute;
					transform:rotate(45deg);
					left: 45%;
					bottom: -1px;
				}
				.leftL, .RightL{
					background: #5ba9f3;
					width: 5px;
					height: 5px;
					position: absolute;
					display: none;
					transform:rotate(45deg);
					top: 11px;
					border: 1px solid #ffffff;
				}
			}
			li.istoday{
				.badge{
					display: block;
				}
				.day{
					color: #5ba9f3;
				}
			}
			li.isSelected{
				.day{
					background: #5ba9f3;
					color: #fff;
					border-radius: 14px;
				}
				.leftL, .RightL{
					display: block;
				}
				.leftL{
					left: 4px;
				}
				.RightL{
					right: 4px;
				}
			}
			li.isSelected.istoday {
				.badge{
					display: none;
				}
			}
		}
	}
</style>
